<template>
<div class="playList">
	<playlist-head :dataDe="dataDetail" ></playlist-head>
	<pylist-intro :dataDe='dataDetail' ></pylist-intro>
	<h3 class="smtitle">歌曲列表</h3>
	<hotmusiclist :list='songlist' :rank='rank' ></hotmusiclist>
	<h3 class="smtitle">精彩评论</h3>
	<hot-comment :hotcoms='hotlistComment' :hiddent='hiddent'></hot-comment>
	<h3 class="smtitle">最新评论</h3>
	<hot-comment :hotcoms='newComment' hiddent='2'></hot-comment>
	
	<collect-list></collect-list>
	
	
</div>
</template>

<script>
import playlistHead from '@/components/playlistHead'
import api from '@/api'
import axios from 'axios'
import pylistIntro from '@/components/pylistIntro'
import hotmusiclist from '@/components/hotmusiclist'
import hotComment from '@/components/hotComment'
import collectList from '@/components/collectList'

	
export default {
	components:{
		playlistHead,
		pylistIntro,
		hotmusiclist,
		hotComment,
		collectList
	},
	data(){
		return {
			listDetail:'',
			dataDetail:'',
			songlist:'',
			rank:false,
			hotlistComment:'',
			hiddent:1,
			newComment:''
		}
	},
	name:'playList',
	activated:async function(){
//		console.log("hi")
//		获取歌单详情
		let res = await axios.get(api.listDetail+this.$route.query.id)
//		console.log(api.listDetail+this.$route.id)
//		console.log(res)
		this.dataDetail = res.data.playlist;
		this.songlist=res.data.playlist.tracks;
//		console.log(this.dataDetail)
//		获取评论
		let listcomment = await axios.get(api.listComment+this.$route.query.id)
		
		this.hotlistComment=listcomment.data.hotComments;
//		console.log(this.hotlistComment);
//		console.log(listcomment.data)
		this.newComment=listcomment.data.comments;
		console.log(this.newComment)
		
	},
	mounted(){
//		console.log("hello")
		this.$store.commit("hiddentHead",{
			hiddentHead:true
		})
	}
}


</script>

<style lang="scss">
@import '../scss/common';
@import '../scss/reset';
	
.playList{
	font-size: r(50px) ;
	color: black;
}
.smtitle{
	text-align: left;
	height: r(46px);
    line-height: r(46px);
    padding: 0 r(20px);
    font-size: r(24px);
    color: #666;
    background-color: #eeeff0;
}
</style>